<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        .body {
            width: 1200px;
            margin: 20px auto 0;
        }
        td a:first-child {
            margin-right: 15px;
        }
    </style>
</head>
<body>
<section class="body">
    <div class="panel panel-info">
        <div class="panel-heading">文件上传</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-10">
                    <form action="" enctype="multipart/form-data" method="post">
                        <input id="file1" type="file" class="form-control">
                    </form>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary" id="btn-upload1">
                        <span class="glyphicon glyphicon-open" aria-hidden="true"></span>
                        上传
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">文件上传</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-10">
                    <form action="" enctype="multipart/form-data" method="post">
                        <input id="file2" type="file" class="form-control">
                    </form>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary" id="btn-upload2">
                        <span class="glyphicon glyphicon-open" aria-hidden="true"></span>
                        上传
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">数据操作</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-5">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon1">@</span>
                        <input id="name" type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon2">*</span>
                        <input id="pwd" type="text" class="form-control" placeholder="Password" aria-describedby="basic-addon2">
                        <input type="hidden" id="id">
                    </div>
                </div>
                <div class="col-md-2">
                    <button id="add" type="button" class="btn btn-primary">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        <span id="btn-txt">添加</span>
                    </button>
                </div>
            </div>
        </div>
        <table  class="table table-condensed table-hover">
            <tr>
                <th>ID</th>
                <th>Username</th>
                <th>Password</th>
                <th>操作</th>
            </tr>
            <tbody id="tbody">
                <tr>
                    <td>1</td>
                    <td>ZhangFei</td>
                    <td>13123123</td>
                    <td>
                        <a href="">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                        </a>
                        <a href="">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</section>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
    $(document).ready(function () {
        // 文件上传
        function sendFile(fileId, url) {
            var file = document.querySelector(fileId).files[0];

            if (!file || file.size === 0) {
                alert('请选择文件');
                return;
            }

            var fd = new FormData();
            fd.append('file', file);

            $.ajax({
                method: 'post',
                url: url,
                data: fd,
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                }
            });
        }

        $('#btn-upload1').click(function () {
            sendFile('#file1', '/face/insert');
        });
        $('#btn-upload2').click(function () {
            sendFile('#file2', '/face/query');
        });

        // 数据操作
        // 列表查询
        $.ajax({
            method: 'get',
            url: '/users/list',
            dataType: 'json',
            success: function (res) {
                var data = res.data;
                var tbody = document.querySelector('#tbody');
                var fragment = document.createDocumentFragment();
                data.forEach(function (d, i) {
                    var tr = $('tr');
                    tr.append(''
                        + '<td>' + d.id + '</td>'
                        + '<td>' + d.name + '</td>'
                        + '<td>' + d.password + '</td>'
                        + '<td>'
                            + '<a data-id="'+d.id+'" data-name="'+d.name+'" data-pwd="'+d.password+'" class="edit">'
                                + '<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>'
                            + '</a>'
                            + '<a href="/user/' + d.id + '">'
                                + '<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>'
                            + '</a>'
                        + '</td>'
                    )
                    fragment.appendChild(tr[0]);
                });

                tbody.appendChild(fragment);
            }
        })

        // 添加
        $('#add').click(function () {
            var name = $('#name').val();
            var pwd = $('#pwd').val();
            var id = $('#id').val();

            if (!name || !pwd) {
                alert('账号密码不能为空');
                return;
            }

            var url = '/user'; // 添加的url
            id ? url = '/user/' + id : ''; // 编辑的url

            $.ajax({
                method: 'post',
                url: url,
                data: {}, // todo 参数
                dataType: 'json',
                success: function (res) {
                    console.log(res);

                    if (id) {
                        $('#id').val('');
                        $('#btn-txt').text('添加');
                    }
                }
            });
        });

        // 编辑
        $('.edit').click(function () {
            var e = $('.edit');
            var id = e.data('id');
            var name = e.data('name');
            var pwd = e.data('pwd');

            $('#name').val(name);
            $('#pwd').val(pwd);
            $('#id').val(id);
            $('#btn-txt').text('确定');
        })
    })
</script>
</body>
</html>